<template>
  <div>
    <!-- 个人中心弹窗 -->
    <el-dialog title="个人中心" :visible.sync="dialogFormVisible">
      <el-row>
        <el-col :span="18" :xs="24">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <span>修改个人信息</span>
              <el-form
                ref="ruleForm"
                :model="ruleForm"
                status-icon
                label-width="100px"
                class="demo-ruleForm"
                :rules="rules"
              >
                <el-form-item label="昵称：" prop="nickname">
                  <el-input v-model="ruleForm.nickname"></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    type="primary"
                    @click="submitForm('ruleForm')"
                    size="mini"
                    >提交</el-button
                  >
                  <el-button type="danger" @click="close" size="mini"
                    >关闭</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { updateAmend } from '@/api/profile'
export default {
  data () {
    return {
      dialogFormVisible: this.dialog,
      ruleForm: {
        nickname: ''
      },
      rules: {
        nickname: [
          { required: true, message: '昵称不能为空', trigger: 'blur' }
        ]
      }

    }
  },
  props: {
    dialog: {}
  },
  watch: {
    dialog (data) {
      this.dialogFormVisible = data
    },
    dialogFormVisible () {
      this.$emit('dialogEvt', this.dialogFormVisible)
    }
  },
  methods: {
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          updateAmend({
            nickname: this.ruleForm.nickname
          }).then(this.$message.success('修改个人信息成功！'))
        }
      })
    },
    close () {
      this.dialogFormVisible = false
    }
  }
}
</script>

<style>

</style>
